<!-- ZmTableColumn -->
<template>
  <el-table-column :show-overflow-tooltip="showOverflowTooltip" v-bind="$attrs" v-on="$listeners" :align="align" v-if="!head">
    <template slot-scope="scope">
      <span v-if="isIndex">{{scope.$index + 1}}</span>
      <div v-else class="wb column-content">
        <slot v-bind="scope">
          <RenderDom :row="scope.row" v-bind="$attrs" class="ell" />
        </slot>
      </div>
    </template>
  </el-table-column>
  <el-table-column :show-overflow-tooltip="showOverflowTooltip" v-bind="$attrs" v-on="$listeners" :align="align" v-else>
    <template slot="header" slot-scope="scope">
      <slot name="header" v-bind="scope"></slot>
    </template>
    <template slot-scope="scope">
      <span v-if="isIndex">{{scope.$index + 1}}</span>
      <div v-else class="wb column-content">
        <slot v-bind="scope">
          <RenderDom :row="scope.row" v-bind="$attrs" class="ell" />
        </slot>
      </div>
    </template>
  </el-table-column>
</template>

<script>
import RenderDom from './RenderDom'
export default {
  name: 'ZmTableColumn',
  components: { RenderDom },
  props: {
    align: { type: String, default: 'center' },
    showOverflowTooltip: { type: Boolean, default: true },
    head: { type: Boolean, default: false }
    //
    /**
     * 以下  注释参数 在 RenderDom 文件
     * k1: String, // 对应数据字段的key
     *  extClass: String, // 扩展类名
     *  isDate: Boolean, // 标记是日期
     *  kClass: String, //  在model 里面配置对应数据 配置 zmClass字段
     * renderDom: {  type: Object  }  // 自定义render 函数
     *
     */

  },
  data () {
    return {

    }
  },
  computed: {
    isIndex () {
      let { type, prop } = this.$attrs
      return type === 'index'
    }
  },

  methods: {
    // 初始化方法
    init () { }
  }
}

</script>
<style lang='scss' scoped>
</style>
